<template>
	<div class="wrapper">
		<div class="pl12 pb12 pr12">
			<Card class="Position">
				<p class="maC span-message1 spanPo designLineHeight" style="zIndex: 1">
					<span>新闻中心</span>
				</p>
				<div class="News Position">
					<span class="gen" style="float: right" @click="moreClick('news','新闻中心列表','/more-detail')">更多</span>
					<div class="new-child wh1 hg">
						<div class="pic-img">
							<div class="new-child-img">
								<horse-light @onChange="carouselChange" ref="carouse" :data-list="News1"></horse-light>
								<!--   -->
							</div>
							<div class="new-content new-content1">
								<div
									@mouseover="$refs.carouse.moveClear()"
									@mouseleave="$refs.carouse.move()"
									id="newsContent"
								>
									<div v-for="(item ,index) in News1" :key="index">
										<p  v-if="(index<8)" class="flex maC wh1 designLineHeight" :ref="'pNews'+index">
											<a
												class="flex-a"
												href="javascript:void(0);"
												:class="{lightNews:carouselValue==index}"
												@mouseover="$refs.carouse.Index=index"
												@click="localClick(item.infoCode=='1',item.url,item.id,item.infoId)"
											>
												<span class="new-icon new-icon-span">
													<span class="word">{{index+1}}</span>
												</span>
												<span
													class="size4 pl12 span-Eli Ellipsis"
													:style="{width:Width+'px'}"
												>{{item.newsTitle}}</span>
												<span class="NewsTime NewsTime1">{{item.createTime}}</span>
											</a>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</Card>
		</div>
	</div>
</template>

<script>
import Cookies from 'js-cookie'
import { fromPost, screenW, onSize } from '@/libs/tool'
import { selectNewsPortal } from '@/api/moduleIndex.js'
import horseLight from '@/components/common/horseLight.vue'
export default {
	name: 'design-news',
	components: { horseLight },
	props: {},
	data() {
		return {
			carouselValue: 0,
			News1: [],
			userInfo: '', //用户信息
			accessToken: '',
			Width: 0, //新闻宽度超出显示省略号
			screenWidth: screenW(), //屏幕宽度
		}
	},
	watch: {
		screenWidth(val) {
			this.screenWidth = val
			this.onWidth()
		},
	},
	computed: {},
	methods: {
		fromSummit: fromPost,
		init() {
            this.accessToken = this.getSession('accessToken')
			let userInfo = JSON.parse(Cookies.get('userInfo'))
			this.selectNewsPortal()
		},
		moreClick(type, name, path) {
			this.setStore('moreDetailType', {
				type: type,
				name: name,
				path: path,
			})
			this.$router.push({
				path: path,
			})
		},
		carouselChange(val) {
			this.carouselValue = val
		},
		selectNewsPortal() {
			//新闻

			selectNewsPortal({
				departmentId: this.userInfo.departmentId,
				num: 7,
			}).then((res) => {
				let data = res
				if (res.success) {
					//   this.tipsNews = data;
					this.News1 = data.result
				}
			})
		},
		onWidth() {
			let newsId = document.getElementById('newsContent')
			let that = this
			setTimeout(function () {
				that.Width = newsId.offsetWidth - 12 - 160
			}, 0)
		},
	},
	created() {
		this.init()
	},
	mounted() {
		onSize(this, 'screenWidth') //监听赋值
		this.onWidth() //动态的添加宽度为了本页面的省略号才搞的
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
	height: 100%;
}
</style>
<style lang="less">
@import './less/home.less';
@import '../../styles/common.less';
.my-card {
	.ivu-card-body {
		padding: 10px 12px;
	}
}
.my-card1 {
	.ivu-card-body {
		padding: 0;
	}
}
</style>
<style scoped lang="less">
@import './less/page_home.less';
.designLineHeight{line-height: 22px;}
.demo-carousel {
	width: 100%;
	height: 100%;
}
.page_home_main {
	height: 100%;
}
.page_home_scroll {
	height: 100%;
	width: 100%;
}
</style>